import { useState, useMemo } from 'react'

const Demo7 = () => {
  let [count, setCount] = useState(1)
  let [val, setVal] = useState('小白')

  function calc() {
    console.log('计算属性 calc')
    return count * 100
  }
  // 缓存计算结果的值
  const memoedCalc = useMemo(calc, [count])

  console.log('demo7 render')
  return (
    <div>
      <h3>useMemo</h3>
      <p>
        count: {memoedCalc}
        <button onClick={() => setCount(count + 1)}>incCount</button>
      </p>
      <p>
        val: {val}{' '}
        <input
          type="text"
          value={val}
          onChange={(e) => setVal(e.target.value)}
        />
      </p>
    </div>
  )
}

export default Demo7
